<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/xm-select-master/dist/xm-select.js"></script>
</head>

<body>
    <div class="udukb">  <!--导栏-->
        <a href={% url 'index' %}><img src="{% static 'img/loog.png' %}" width="200px" height="60px"></a>
        <div class="aeuj">
            <ul>
                <li ><a href={% url 'index' %} class="yoqc">音乐馆</a></li>
                <li><a href={% url 'ujqi_rdtf' %}>音乐排行</a></li>
                <li><a href={% url 'wd' %}>我的音乐</a></li>
            </ul>
        </div>
        <div class="rtfp">
            <input type="text">
            <div><span class="layui-icon">&#xe615;</span></div>-
        </div>
        {% if current_etyn == None %}
          <a href={% url 'logn' %}><span>登录</span></a>
        {% else %}
        <div>
          <ul class="layui-nav" lay-bar="disabled">
            <li class="layui-nav-item" lay-unselect="">
              <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
              <dl class="layui-nav-child">
                <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        {% endif %}
    </div>
    <div class="skuj">
        <div class="sk-uduk">
            <img src="/media/{{ovrn.skuj_img}}" width="250px" height="250px">
            <div class="sk-riglp layui-icon">
                <h2 style="margin-bottom:10px">{{ovrn.skuj_name}}</h2>
                <p>播放量：{{ovrn.rtytjgf}}</p>
                <p>收藏量：{{ovrn.nhadjgf}}</p>
                <div style="margin-top:10px">
                    <a href="{% url 'ulpfk' %}?odkl=2&id={{ovrn.skuj_id}}" class="layui-btn"> &#xe652; 播放全部</a>
                    {% if a %}
                        <a onclick="bcii({{ovrn.skuj_id}})" class="layui-btn layui-btn-primary epny-udqc">&#xe68f; 收藏</a>
                    {% else %}
                        <a onclick="hkdm({{ovrn.skuj_id}})" class="layui-btn layui-btn-primary">&#xe68c; 收藏</a>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="sk-gqge">
            <div class="gqge-left">
                <table class="layui-table" lay-skin="line">
                    <colgroup>
                        <col width="50">
                        <col width="200">
                        <col width="150">
                        <col width="100">
                    </colgroup>
                    <thead>
                        <tr>
                            <th></th>
                            <th>歌曲</th>
                            <th>歌手</th>
                            <th>时长</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for i in ujqi%}
                        <tr>
                            <td>{{forloop.counter}}</td>
                            <td><a href="{% url 'sm_yung' %}?id={{i.skma_id.skma_id}}">{{i.skma_id.skma_name}}</a></td>
                            <td>{{i.skma_id.skrt}}</td>
                            <td>{{i.skma_id.jfta}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="gqge-rigth">
                <h3 style="font-weight:bold;">简介</h3>
                <p>{{ovrn.skuj_ttwj}}</p>
            </div>
        </div>
    </div>
</body>
<script>
    function hkdm(id){
        layer.confirm('是否收藏歌单', {
                btn: ['取消','确定'] //按钮
                }, function(){
                layer.msg('操作取消', {icon: 1});
                }, function(){
                    var hid = id
                    $.ajax({
                        type:"POST",
                        url:"skuj_nhan",
                        data:{'id':hid},
                        headers: { "X-CSRFToken": "{{ csrf_token }}" },
                        success:function(data){
                            var a = JSON.stringify(data.url);
                            window.location.href=a.split('"')[1]
                        }
                    })
            });
    }

    function bcii(id){
        layer.confirm('是否取消收藏歌单', {
                btn: ['取消','确定'] //按钮
                }, function(){
                layer.msg('操作取消', {icon: 1});
                }, function(){
                    var bid = id
                    $.ajax({
                        type:"POST",
                        url:"skuj_nhan_bcii",
                        data:{'id':bid},
                        headers: { "X-CSRFToken": "{{ csrf_token }}" },
                        success:function(data){
                            var a = JSON.stringify(data.url);
                            window.location.href=a.split('"')[1]
                        }
                    })
            });
    }
</script>
<style>
    .epny-udqc{
        color:red;
    }
    .layui-nav{
        background-color:#ffffff;
      }
    .skuj {
        width: 1080px;
        margin: 0 auto;
    }

    .sk-uduk {
        height: 250px;
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .sk-riglp {
        margin-left: 30px;
    }

    .sk-gqge {
        margin-top: 30px;
        display: flex;
    }

    .gqge-left {
        width: 800px;
    }

    .gqge-rigth {
        width: 280px;
        margin-left:40px;
    }
</style>
<style>
    /* 头部导航栏 */
    .udukb {
        width: 1080px;
        height: 60px;
        margin: 0 auto;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .aeuj ul {
        list-style: none;
    }

    .aeuj ul li {
        display: inline;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 18px;
    }

    .yoqc {
        color: #1E9FFF;
    }

    .rtfp input {
        height: 25px;
        border: none;
        border-top: 1px black solid;
        border-bottom: 1px black solid;
        border-left: 1px black solid;
        font-size: 16px;
    }

    .rtfp {
        display: flex;
    }

    .rtfp div {
        height: 25px;
        width: 20px;
        border-top: 1px black solid;
        border-right: 1px black solid;
        border-bottom: 1px black solid;
        line-height: 25px;
    }
</style>

</html>